<template>
  <div class="First"
       v-if="Form">
    <!-- 订单信息 -->
    <div class="items">
      <div class="title">订单信息</div>
      <el-form ref="form"
               class="form"
               :model="Form"
               label-width="80px"
               label-position="left"
               size="mini">
        <el-form-item label="订单状态">
          <el-tag :type="Form.last_status | statusFilter">
            {{Form.last_status_f}}
          </el-tag>
        </el-form-item>
        <el-form-item label="相关产品">
          <div class="clearfix">
            <img class="fl"
                 width="100"
                 height="100"
                 :src="formatImage(Form.product.cover_image)">
            <div class="fl pl-20">
              <div class="font-bold text-black">{{Form.order_name}}</div>
              <div>规格：{{Form.product.specs_name}}</div>
              <div>单价：¥{{Form.unit_price/100}}&emsp;&emsp;数量：{{Form.number}}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="订单金额">
          <div>¥ {{ Form.order_price/100 }}</div>
        </el-form-item>
        <el-form-item label="优惠金额">
          <div>¥ {{ Form.discount_money/100 }}</div>
        </el-form-item>
        <el-form-item label="实付金额">
          <div>¥ {{ Form.recived_price/100 }}</div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 相关心愿 -->
    <div class="items"
         v-if="Form.order_type!='self_support'">
      <div class="title">相关心愿</div>
      <el-form ref="form"
               class="form"
               label-width="80px"
               label-position="left"
               size="mini">
        <el-form-item label="心愿编号">
          <div>{{ Form.wish_id }}</div>
        </el-form-item>
        <el-form-item label="买家名称">
          <div>{{ Form.customer.nickname || Form.customer.customer_id  }}</div>
        </el-form-item>
        <el-form-item label="联系方式">
          <div>{{ Form.customer.phone}}</div>
        </el-form-item>
        <el-form-item>
          <el-button @click="tripHandle()"
                     type="primary"
                     v-if="Form.order_type!='self_support'"
                     plain>{{Form.trip.trip_history.buyed?'查看采购信息':'录入采购信息'}}</el-button>
        </el-form-item>
      </el-form>
      <!-- 采购信息 -->
      <el-dialog v-if="Form.order_type!='self_support'"
                 :title="Form.trip.trip_history.buyed?'查看采购信息':'录入采购信息'"
                 :visible.sync="dialogBuyVisible">
        <el-form :model="buyForm"
                 label-width="100px">
          <el-form-item label="定位信息">
            <el-input v-model="buyForm.location_text"
                      :disabled="Form.trip.trip_history.buyed?true:false"
                      placeholder="请录入商品购买地的定位地址"></el-input>
          </el-form-item>

          <el-form-item label="发票照片">
            <el-upload action="https://assets.tourscool.com/upload.php"
                       name="uploadFile"
                       :headers="{
                    Authorization:'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9hcGkub3N0LmNvbVwvYXBpXC90b3VyXC92MVwvbG9naW4iLCJpYXQiOjE1NDc0NTgzNzIsImV4cCI6MTg2MjgxODM3MiwibmJmIjoxNTQ3NDU4MzcyLCJqdGkiOiIzU2VYYk9vcE5uRjFOelpzIiwic3ViIjo5NTIsInBydiI6IjFkMGEwMjBhY2Y1YzRiNmM0OTc5ODlkZjFhYmYwZmJkNGU4YzhkNjMiLCJ1aWQiOjk1Mn0.dBetexvcYix1wYgOWGtYHumnOrNB3ghHy1Isn4r-8mU'
                      }"
                       :file-list="invoiceImageList"
                       list-type="picture-card"
                       :limit="3"
                       :disabled="Form.trip.trip_history.buyed?true:false"
                       :on-exceed="overLimit"
                       :on-preview="invoicePreview"
                       :on-success="invoiceImageSuccess"
                       :on-remove="invoiceRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="invoicePreviewDialog"
                       append-to-body>
              <img width="100%"
                   :src="invoiceImagedialog"
                   alt="">
            </el-dialog>
          </el-form-item>

          <el-form-item label="商品图片">
            <el-upload action="https://assets.tourscool.com/upload.php"
                       name="uploadFile"
                       :headers="{
                    Authorization:'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9hcGkub3N0LmNvbVwvYXBpXC90b3VyXC92MVwvbG9naW4iLCJpYXQiOjE1NDc0NTgzNzIsImV4cCI6MTg2MjgxODM3MiwibmJmIjoxNTQ3NDU4MzcyLCJqdGkiOiIzU2VYYk9vcE5uRjFOelpzIiwic3ViIjo5NTIsInBydiI6IjFkMGEwMjBhY2Y1YzRiNmM0OTc5ODlkZjFhYmYwZmJkNGU4YzhkNjMiLCJ1aWQiOjk1Mn0.dBetexvcYix1wYgOWGtYHumnOrNB3ghHy1Isn4r-8mU'
                      }"
                       :file-list="productImageList"
                       list-type="picture-card"
                       :limit="3"
                       :disabled="Form.trip.trip_history.buyed?true:false"
                       :on-exceed="overLimit"
                       :on-preview="productPreview"
                       :on-success="productImageSuccess"
                       :on-remove="productRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="productPreviewDialog"
                       append-to-body>
              <img width="100%"
                   :src="productImagedialog"
                   alt="">
            </el-dialog>
          </el-form-item>

        </el-form>
        <div slot="footer"
             v-if="!Form.trip.trip_history.buyed"
             class="dialog-footer">
          <el-button @click="dialogBuyVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="saveBuyInfo()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 收货信息 -->
    <div class="items">
      <div class="title">收货信息</div>
      <el-form ref="form"
               class="form"
               label-width="80px"
               label-position="left"
               size="mini">
        <el-form-item label="收货人">
          <div>{{ Form.customer_address.name }}</div>
        </el-form-item>
        <el-form-item label="联系方式">
          <div>{{ Form.customer_address.phone }}</div>
        </el-form-item>
        <el-form-item label="收货地址">
          <div v-if="Form.customer_address['province']">{{ Form.customer_address.province.province_name }}-{{ Form.customer_address.city.city_name }}-{{ Form.customer_address.area.area_name }}&emsp;{{ Form.customer_address.detail }}</div>
        </el-form-item>
        <el-form-item>
          <el-button @click="logisticsInfoHandle()"
                     type="primary"
                     plain>{{Form.logistics.name?'查看物流信息':'录入物流信息'}}</el-button>
          <el-button @click="sendHandle()"
                     :disabled="Form.order_type=='wish'?(Form.logistics.name && Form.trip.trip_history.buyed?false:true):(Form.logistics.name?false:true)"
                     type="primary"
                     plain>发货</el-button>
        </el-form-item>
      </el-form>
      <!-- 物流信息 -->
      <el-dialog :title="`${Form.logistics.name?'查看':'录入'}物流信息`"
                 :visible.sync="dialogLogisticsVisible">
        <el-form :model="logisticsForm"
                 label-width="100px">
          <el-form-item label="物流公司">
            <el-input v-model="logisticsForm.name"
                      :disabled="Form.logistics.name?true:false"
                      placeholder="请填写物流公司"></el-input>
          </el-form-item>
          <el-form-item label="物流单号">
            <el-input v-model="logisticsForm.number"
                      :disabled="Form.logistics.name?true:false"
                      placeholder="请填写物流单号"></el-input>
          </el-form-item>

          <el-form-item label="发货照片"
                        v-if="Form.order_type!='self_support'">
            <el-upload action="https://assets.tourscool.com/upload.php"
                       name="uploadFile"
                       :headers="{
                    Authorization:'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9hcGkub3N0LmNvbVwvYXBpXC90b3VyXC92MVwvbG9naW4iLCJpYXQiOjE1NDc0NTgzNzIsImV4cCI6MTg2MjgxODM3MiwibmJmIjoxNTQ3NDU4MzcyLCJqdGkiOiIzU2VYYk9vcE5uRjFOelpzIiwic3ViIjo5NTIsInBydiI6IjFkMGEwMjBhY2Y1YzRiNmM0OTc5ODlkZjFhYmYwZmJkNGU4YzhkNjMiLCJ1aWQiOjk1Mn0.dBetexvcYix1wYgOWGtYHumnOrNB3ghHy1Isn4r-8mU'
                      }"
                       :file-list="logisticsImageList"
                       list-type="picture-card"
                       :limit="3"
                       :disabled="Form.logistics.name?true:false"
                       :on-exceed="overLimit"
                       :on-preview="logisticsPreview"
                       :on-success="logisticsImageSuccess"
                       :on-remove="logisticsRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="logisticsPreviewDialog"
                       append-to-body>
              <img width="100%"
                   :src="logisticsImagedialog"
                   alt="">
            </el-dialog>
          </el-form-item>

        </el-form>
        <div slot="footer"
             v-if="!Form.logistics.name"
             class="dialog-footer">
          <el-button @click="dialogLogisticsVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="saveLogisticsInfo()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 其他信息 -->
    <div class="items">
      <div class="title">其他信息</div>
      <el-form ref="form"
               class="form"
               label-width="80px"
               label-position="left"
               size="mini">
        <el-form-item label="订单编号">
          <div>{{ Form.id }}</div>
        </el-form-item>
        <el-form-item label="交易号">
          <div>{{ Form.pay_data && JSON.parse(Form.pay_data).trade_no }}</div>
        </el-form-item>
        <el-form-item label="交易方式">
          <div>{{ Form.pay_way}}</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {writeBuyInfo, writeLogisticsInfo, getLogisticsInfo, sendProduct, getTripInfo} from '@/api/order'
export default {
  props: {
    Data: {
      type: Object,
      default: null,
    },
  },
  filters: {
    statusFilter(status) {
      //all 所有 0待支付 10待发货 20待收货 30待评价 40交易成功 50交易失败  60订单取消
      const statusMap = {
        0: '',
        10: 'primary',
        20: 'success',
        30: 'info',
        40: 'success',
        50: 'danger',
        60: 'warning',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      dialogBuyVisible: false, //行程信息弹窗
      buyForm: {
        order_id: this.$route.params && Number(this.$route.params.id),
        location_text: '',
        invoice_imgs: [],
        product_imgs: [],
      }, //采购信息

      invoiceImageList: [], //{name:'',url:''}
      invoiceImagedialog: '',
      invoicePreviewDialog: false,

      productImageList: [], //{name:'',url:''}
      productImagedialog: '',
      productPreviewDialog: false,

      dialogLogisticsVisible: false, //物流信息弹窗
      logisticsForm: {
        order_id: this.$route.params && Number(this.$route.params.id),
        name: '',
        number: '',
        logistics_imgs: [],
      },
      logisticsImageList: [], //{name:'',url:''}
      logisticsImagedialog: '',
      logisticsPreviewDialog: false,
    }
  },
  computed: {
    Form() {
      return this.Data
    },
  },
  methods: {
    /**
     * @name: 上传超出限制
     * @param {type}
     * @return: null
     */
    overLimit() {
      this.$notify({
        message: '超出上传张数',
        type: 'warning',
        duration: 2000,
      })
    },

    /****************************************************************/

    /**
     * @name: 发票图片预览
     * @param {type}
     * @return: null
     */
    invoicePreview(file) {
      this.invoiceImagedialog = file.url
      this.invoicePreviewDialog = true
    },
    /**
     * @name: 发票图片上传成功
     * @param {type}
     * @return: null
     */
    invoiceImageSuccess(res, file, fileList) {
      this.invoiceImageList = fileList.slice(-3)
    },
    /**
     * 删除发票图片
     */
    invoiceRemove(file, fileList) {
      this.invoiceImageList = fileList.slice(-3)
    },

    /****************************************************************/

    /**
     * @name: 产品图片预览
     * @param {type}
     * @return: null
     */
    productPreview(file) {
      this.productImagedialog = file.url
      this.productPreviewDialog = true
    },
    /**
     * @name: 产品图片上传成功
     * @param {type}
     * @return: null
     */
    productImageSuccess(res, file, fileList) {
      this.productImageList = fileList.slice(-3)
    },
    /**
     * 删除产品图片
     */
    productRemove(file, fileList) {
      this.productImageList = fileList.slice(-3)
    },
    /**
     * @name: 新增/查看采购信息
     * @param {type}
     * @return: null
     */
    tripHandle() {
      this.invoiceImageList = []
      this.productImageList = []

      let isView = this.Form.trip.trip_history.buyed ? true : false
      if (isView) {
        this.$set(this.buyForm, 'location_text', this.Form.trip.trip_history.buyed.location_text)
        this.$set(this.buyForm, 'invoice_imgs', this.Form.trip.trip_history.buyed.invoice_imgs)
        this.$set(this.buyForm, 'product_imgs', this.Form.trip.trip_history.buyed.product_imgs)

        this.Form.trip.trip_history.buyed.invoice_imgs.map(value => {
          this.invoiceImageList.push({url: this.formatImage(value)})
        })
        this.Form.trip.trip_history.buyed.product_imgs.map(value => {
          this.productImageList.push({url: this.formatImage(value)})
        })
        this.dialogBuyVisible = true
      } else {
        this.dialogBuyVisible = true
      }
    },

    /****************************************************************/

    /**
     * @name: 物流图片预览
     * @param {type}
     * @return: null
     */
    logisticsPreview(file) {
      this.logisticsImagedialog = file.url
      this.logisticsPreviewDialog = true
    },
    /**
     * @name: 物流图片上传成功
     * @param {type}
     * @return: null
     */
    logisticsImageSuccess(res, file, fileList) {
      this.logisticsImageList = fileList.slice(-3)
    },
    /**
     * 删除物流图片
     */
    logisticsRemove(file, fileList) {
      this.logisticsImageList = fileList.slice(-3)
    },
    /**
     * @name: 新增/查看物理信息
     * @param {type}
     * @return: null
     */
    logisticsInfoHandle() {
      this.logisticsImageList = []
      let isView = this.Form.logistics.name ? true : false
      if (isView) {
        this.$set(this.logisticsForm, 'name', this.Form.logistics.name)
        this.$set(this.logisticsForm, 'number', this.Form.logistics.number)
        this.$set(this.logisticsForm, 'logistics_imgs', this.Form.logistics.logistics_imgs)

        this.Form.logistics.logistics_imgs &&
          this.Form.logistics.logistics_imgs.map(value => {
            this.logisticsImageList.push({url: this.formatImage(value)})
          })
        this.dialogLogisticsVisible = true
      } else {
        this.dialogLogisticsVisible = true
      }
    },

    /****************************************************************/

    /**
     * @name: 保存采购信息
     * @param {type}
     * @return: null
     */
    saveBuyInfo() {
      if (!this.buyForm.location_text) {
        this.$message('请填写定位信息')
        return
      }
      if (this.invoiceImageList.length < 1) {
        this.$message('请上传发票图')
        return
      }
      if (this.productImageList.length < 1) {
        this.$message('请上传商品图')
        return
      }

      this.$set(this.buyForm, 'invoice_imgs', this.filterImgData(this.invoiceImageList))
      this.$set(this.buyForm, 'product_imgs', this.filterImgData(this.productImageList))

      writeBuyInfo(this.buyForm).then(res => {
        this.$notify({
          message: '采购信息录入成功',
          type: 'success',
          duration: 2000,
        })
        this.$emit('refresh')
        this.dialogBuyVisible = false
      })
    },
    /**
     * @name: 保存物流信息
     * @param {type}
     * @return: null
     */
    saveLogisticsInfo() {
      if (!this.logisticsForm.name) {
        this.$message('请填写物流公司')
        return
      }
      if (!this.logisticsForm.number) {
        this.$message('请填写物流单号')
        return
      }

      this.$set(this.logisticsForm, 'logistics_imgs', this.filterImgData(this.logisticsImageList))

      writeLogisticsInfo(this.logisticsForm).then(res => {
        this.$notify({
          message: '物流信息录入成功',
          type: 'success',
          duration: 2000,
        })
        this.$emit('refresh')
        this.dialogLogisticsVisible = false
      })
    },
    /**
     * @name: 过滤图片数据
     * @param {type}
     * @return: null
     */
    filterImgData(data = []) {
      if (!data || data.length < 1) {
        return []
      }
      console.log('已上传的图片数组：', data)
      let ret = []
      data.map(value => {
        ret.push(value.response.data.relative_url)
      })
      return ret
    },
    /**
     * @name: 发货
     * @param {type}
     * @return: null
     */
    sendHandle() {
      sendProduct({order_id: this.$route.params.id}).then(res => {
        this.$notify({
          message: '发货成功',
          type: 'success',
          duration: 2000,
        })
        this.$emit('refresh')
      })
    },
  },
}
</script>
<style lang='scss'>
.First {
  padding: 10px 20px;
  .title {
    line-height: 60px;
    font-weight: bold;
    padding: 0 20px;
  }
  .form {
    border: 1px solid #ddd;
    border-top: 0;
    padding: 0 20px;
    color: #666;
  }
}
</style>
